<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img{margin: 20px;width: 500px; height: 400px;}
  </style>
</head>
<body>
  <h1>这是懒加载效果</h1>
  <div class="asideBox"></div>
  <div class="content">
    <img data-src="https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=3779234486,1094031034&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=3908717,2002330211&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF" alt="" class="lazy">
    <img data-src="https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF" alt="" class="lazy">
  </div>
</body>
<script>

  const lazy = Array.from(document.querySelectorAll(".lazy"));

  // 初始判断图片是否在可视区域内，在，加载
  lazyImg(lazy, 0);

  onscroll = function(){
    // 滚动过程中，不断判断图片是否在可视区域内，在，加载
    const scrollT = document.documentElement.scrollTop;
    lazyImg(lazy, scrollT);
  }

  function lazyImg(ele, scrollT){
    const clientH = document.documentElement.clientHeight;
    for(let i=0;i<ele.length;i++){
      // 滚动的距离 + 浏览器可视区域高度 > 图片距离页面顶端的距离
      if(scrollT + clientH > ele[i].offsetTop){
        // 加载图片
        ele[i].src = ele[i].dataset.src;
        // 从数组中删除已加载的图片
        ele.splice(i, 1);
        // 同步索引
        i--;
      }
    }
  }

  // 在可视区域内
  // 滚动的距离 + 浏览器可视区域高度 > 图片距离页面顶端的距离


  // ============

  // 公共结构-侧边栏的加载和渲染
  fetch("http://127.0.0.1:5500/day34/www/public/page/aside.html").then(res=>res.text()).then(res=>{
    document.querySelector(".asideBox").innerHTML = res;
    // 注意异步：因为数据请求是异步程序，请求过来的页面结构，在异步之外获取不到
    document.querySelectorAll(".asideBox li")[0].onclick = function(){
      alert(this.innerHTML);
    }
  })
  
  
</script>
</html>